<script setup>
import PageContainer from "@/components/PageContainer.vue";
import ProductCard from "@/components/ProductCard.vue";
import {useGoodsStore} from "@/stores";
import {ref} from "vue";
import {useRouter} from "vue-router";

const goodsStore=useGoodsStore()
const router = useRouter()

// 父组件参数绑定 定义请求参数对象
const params = ref({
  type:goodsStore.type,
  brand:goodsStore.brand,
  page: 1,
  pagesize: 8,
})
// 处理分页逻辑
const onSizeChange = (size) => {
  params.value.pagenum = 1
  params.value.pagesize = size
  getGoodsList()
}
const onCurrentChange = (page) => {
  params.value.pagenum = page
  getGoodsList()
}
//获取商品集合和商品total
const  getGoodsList=async () =>{
  await goodsStore.GetList(params.value.type,params.value.brand,params.value.page,params.value.pagesize)
  await goodsStore.GetNum(params.value.type,params.value.brand)
}
getGoodsList()
// 进入详情页面携带id
const goDetail=(id)=>{
  goodsStore.nowGoodsId=id
  router.push('/product/detail')
}
</script>


<template>
  <page-container>
    <div class="products-container">
      <product-card
          @click="goDetail(product.id)"
          class="product-card"
          v-for="(product) in goodsStore.goodsList"
          :key="product.id"
          :product-image="product.img"
          :product-name="product.name"
          :product-description="product.info"
          :product-price="product.price"
      >
      </product-card>
    </div>

    <!--    分页区-->
    <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.pagesize"
        :page-sizes="[4,8, 12, 16, 20]"
        layout="jumper, total, sizes, prev, pager, next"
        background
        :total="goodsStore.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
        style="margin-top: 20px; justify-content: flex-end"
    />
  </page-container>
</template>

<style scoped>
.products-container {
  display: flex;
  flex-wrap: wrap; /* 允许盒子换行 */
//justify-content: space-around; /* 可选：在盒子之间平均分配空间 */
}

.product-card {
//flex-basis: calc(25% - 10px); /* 每个盒子占据的空间，减去间隔 */
  /* 盒子之间的间隔 */
  margin: 10px 10px 10px 40px;
}

</style>
